<template>
	<div class="search" v-show="showSearch">		<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">			<el-form-item label="课程名称" prop="courseName">				<el-input					v-model="queryParams.courseName"					placeholder="请输入房间名称"					clearable					style="width: 240px"					@keyup.enter="handleQuery"				/>			</el-form-item>			<el-form-item label="老师ID" prop="teacherId">				<el-input					v-model="queryParams.teacherId"					placeholder="请输入老师ID"					clearable					style="width: 240px"					@keyup.enter="handleQuery"				/>			</el-form-item>			<el-form-item>				<el-button type="success"  @click="handleQuery">搜索</el-button>				<el-button  @click="resetQuery">重置</el-button>			</el-form-item>		</el-form>	</div>
	<div  class ="addButton">
	   <el-button type="success" @click="handleAdd()">新增</el-button>
	</div>

  <el-table
    :data="myCourseList"
     style="width: 100%"
    >
    <el-table-column prop="courseId" label="ID" width="180" />
    <el-table-column prop="courseName" label="课程名称" width="180" />
    <el-table-column prop="teacherId" label="教师ID" />
	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">			<template #default="scope">				<el-button type="success" plain @click="handleUpdate(scope.row)">修改</el-button>				<el-button type="danger" plain @click="handleDelete(scope.row)">删除</el-button>			</template>		</el-table-column>
  </el-table>
    <el-pagination
	  v-if="total>0"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 30, 100]"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" >		<el-form ref="courseFormRef" :model="form" :rules="rules">			<el-form-item label="ID" prop="courseId">				<el-input v-model="form.courseId" placeholder="请输入ID" />			</el-form-item>			<el-form-item label="课程名称" prop="courseName">				<el-input v-model="form.courseName" placeholder="请输入课程名称" />			</el-form-item>			<el-form-item label="老师ID" prop="teacherId">				<el-input v-model="form.teacherId" placeholder="请输入老师ID" />			</el-form-item>		</el-form>		<template #footer>			<div class="dialog-footer">				<el-button type="primary" @click="submitForm(courseFormRef)">确 定</el-button>				<el-button @click="cancel">取 消</el-button>			</div>		</template>	</el-dialog>
  
</template>

<script lang="ts" setup>
import { ref,onMounted ,reactive,toRefs} from 'vue'
import api from '../api/course'
import type { FormInstance } from 'element-plus'
import  { ElMessage ,ElMessageBox} from 'element-plus'

const courseFormRef = ref<FormInstance>()
const queryFormRef = ref<FormInstance>()
const total  = ref(0)
const showSearch = ref(true);
const dialog = reactive({	visible: false,	title: ''})const initFormData: Course = {	courseId: undefined,	courseName: undefined,	teacherId: undefined}const data = reactive({	form: { ...initFormData },	queryParams: {		pageNum: 1,		pageSize: 4,		courseId: undefined,		courseName: undefined,		teacherId: undefined	},	rules: {		courseId: [{ required: true, message: '房间名称不能为空', trigger: 'blur' }],		courseName: [{ required: true, message: '类型ID不能为空', trigger: 'blur' }],		teacherId: [{ required: true, message: '类型名称不能为空', trigger: 'blur' }]	}})const { queryParams, form, rules } = toRefs(data)
const isAdd = ref(false)


const handleSizeChange  =(value: number)=>{
	console.log("handleSizeChange  :  "+value)
	
}
const handleCurrentChange  =(value: number)=>{
		console.log("handleCurrentChange  :  "+value)
		queryParams.value.pageNum = value;
		courseList()
}

const submitForm = (formEl: FormInstance | undefined) => {	if (!formEl) return	console.log('submit!:  ')	formEl.validate(async (valid) => {		console.log('validate!:  ')		if (valid) {			console.log('valid!:  ' + form.value.courseId)			if (isAdd.value) {				//新增				const res = await api.addCourseBy(form.value)				console.log('putsubmit!:  ' + res.data)				if (res.data) {					isAdd.value = false					dialog.visible = false					ElMessage.success('新增成功.')				} else {					ElMessage.error('新增异常')				}			} else {				//更新				const res = await api.updateCourseById(form.value)				if (res.data == 1) {					ElMessage.success('更新成功.')					dialog.visible = false				} else {					ElMessage.error('更新异常')				}				console.log('updatesubmit!:  ' + res.data)			}			courseList()		} else {			console.log('error submit!')			return false		}	})}const resetQuery = ()=>{
	queryFormRef.value?.resetFields()	handleQuery()
}
const handleQuery = ()=>{
	queryParams.value.pageNum = 1;
	courseList()
}

const handleAdd = ()=>{
	reset()
	isAdd.value = true;
	dialog.visible = true;
	dialog.title = "课程更新"
}

const handleUpdate =async  (row:Course)=>{
	dialog.visible = true;
	dialog.title = "课程更新"
	const res = await  api.getOneCourse({courseId:row.courseId})
	Object.assign(form.value, res.data)
}

const handleDelete = (row:Course)=>{
	 ElMessageBox.confirm(
	    '确定删除此课程嘛?',
	    '温馨提示',
	    {
	      confirmButtonText: 'OK',
	      cancelButtonText: 'Cancel',
	      type: 'warning',
	    }
	  )
	    .then(async () => {
		 const res = await  api.deleteCourseById({courseId:row.courseId})
		 if(res.data>0){
			 courseList();
	      ElMessage({
	        type: 'success',
	        message: '删除完成',
	      })
		  }else{
			  ElMessage({
			    type: 'error',
			    message: '删除失败',
			  })
		  }
	    })
	    .catch(() => {
	      ElMessage({
	        type: 'info',
	        message: 'Delete canceled',
	      })
	    })
}

/** 取消按钮 */const cancel = () => {	reset()	dialog.visible = false}
const reset = () => {	form.value = { ...initFormData }	courseFormRef.value?.resetFields()}


interface Course {
  courseId: string
  courseName: string
  teacherId: string
}
const myCourseList = ref<Course[]>();

const courseList = async () => {
	//queryParams.value.pageNum -= 1;	const res = await api.getCourseList(queryParams.value)	console.log(res.data)	myCourseList.value = res.data.list
	total.value = res.data.total}onMounted(() => {	courseList()})

interface User {
  date: string
  name: string
  address: string
}

 
 
</script>

<style>
	.addButton{
		text-align: left;
	}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
